<template>
  <div class="Login" id="Login">
    <div id="loginBox" >
      <h4 style="padding-top:0px;margin-top:0px;text-align:center">用户登录</h4>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
        <el-form-item label="">
          <el-row >
            <el-col :span="2">
              <i class="el-icon-user-solid"></i>
            </el-col>
            <el-col :span="22">
              <el-input v-model="loginForm.username" placeholder="姓名"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
            label=""
            prop="passWord"
          >
            <el-row>
              <el-col :span='2'>
               <i class="fa fa-unlock-alt" aria-hidden="true"></i>
             </el-col>
              <el-col :span='22'>
                <el-input
                  class="inps"
                  placeholder='密码'
                  v-model="loginForm.passWord"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="margin-top:20px;text-align:center">

            <el-button
              type="primary"
              class="submitBtn"
              @click="submitForm"
            >登录</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
       loginForm: {
         userName: "",
         passWord: ""
      },
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
         passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
       }
    }
  },
  methods: {
    submitForm(){
      // 密码加密传输
      
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#Login {
  width: 100%;
  height: 100%;
  /* background: url("../assets/background.jpeg") */
  /* background: red */
}
#loginBox {
     width: 300px;
     height: 200px;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     padding: 20px 20px 30px 20px;
     /* box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7); */
     border: 1px solid #a1a3a6;
     /* opacity: 0.5; */
     /* background: url("../assets/background.jpeg") */
}
</style>
